<!-- pages/login/index.vue -->
<template>
  <view class="container">
    <view class="userinfo">
        <img class="userinfo-avatar" :src="avatar" />
    </view>
    <view class="username">
      <img :src="'/static/images/用户名.png'" class="us"/>
      <input type="text" class="usernameInput" @input="usernameInput" placeholder="请输入用户名" v-model="username" placeholder-style="color:	#E6E6FA" />
    </view>
    <view class="password">
      <img :src="'/static/images/密码.png'" class="us"/>
      <input type="text" class="usernameInput" @input="passwordInput" :password="!open" placeholder="请输入密码"  v-model="password" placeholder-style="color:	#E6E6FA" />
      <img :src="open ? '/static/images/显示密码.png' : '/static/images/不显示密码.png'" class="openps" @tap="switch1"/>
    </view>
    <button class="login" @tap="login" :disabled="loginBtnState">登录</button>
  </view>
</template>



<script>
import config from '../../config'
export default {
  data() {
    return {
      avatar:'/static/images/显示密码.png',
      open: false, // 是否显示密码
      loginBtnState: true,
      username: '',
      password: "",
    };
  },
  methods: {
    switch1() {
      this.open = !this.open;
    },
    usernameInput() {
      wx.request({
        url:config.doctorAvatarUrl,
        method:"POST",
        data:{
          name:this.username
        },
        success:(res)=>{
          this.avatar=res.data.data
        }
      })
      if (this.username !== "") {
        if (this.password !== "") {
          this.loginBtnState = false;
        }
      } else {
        this.loginBtnState = true;
      }
    },
    passwordInput() {
      if (this.password !== "") {
        if (this.username !== "") {
          this.loginBtnState = false;
        }
      } else {
        this.loginBtnState = true;
      }
    },
    login() {
      wx.request({
        url:config.doctorloginUrl,
        method:"POST",
        data:{
          doctorName:this.username,
          password:this.password
        },
        success:(res)=>{
          if(res.data.code === 0){
            wx.showToast({
              title: res.data.msg,//提示文字
              duration:1000,//显示时长
              mask:true,//是否显示透明蒙层，防止触摸穿透，默认：false
              icon:'success', //图标，支持"success"、"loading"
            })
          }
          else if(res.data.data !== null){
            wx.setStorage({
              key:"doctorInfo",
              data:JSON.stringify(res.data.data)
            })
            wx.navigateTo({
              url:'/pages/doctorBy/main'
            })
          }
        }

      })
    },
  },
  onShareAppMessage() {
    return {
      title: "分享给朋友",
      path: "/pages/login/index",
    };
  },
};
</script>

<style scoped>


.container{
  padding: 3.5px;
  margin-left: -3px;
  width: 100%;
  height: 100%;
  align-items: center;
  background-image: linear-gradient(rgba(116, 168, 236, 0.5), rgba(112, 122, 108, 0.5)),
  url(https://img-blog.csdnimg.cn/20210530194153446.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70);
  background-size: cover;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  overflow: hidden;
  width: 100px;
  height: 100px;
  margin: 10px;
  border-radius: 50px;
}

.username {
  margin-top: 25px;
  display: flex;
  height: 40px;
  border-bottom: 1.5px solid rgb(58, 57, 57);
  color: white;
}

.us {
  margin-top: 2.5px;
  margin-left: 15px;
  width: 27.5px;
  height: 27.5px;
}

.usernameInput {
  font-size: 15px;
  margin-top: 10px;
  margin-left: 25px;
  width: 72.5%;
}

.userInfo {
  margin-top: 10px;
  margin-left: 10px;
}

.password {
  margin-top: 25px;
  display: flex;
  height: 40px;
  border-bottom: 1.5px solid rgb(58, 57, 57);
  color: white;
}

.openps {
  margin-top: 7px;
  margin-right: 9px;
  width: 30px;
  height: 25px;
}

.login {
  margin-top: 50px;
  width: 50%;
  border: 0.5px rgb(153, 184, 241) solid;
  border-radius: 15px;
}
</style>

